<!doctype html>
<html lang="es">
                  <head>
                  	<title>Sistema</title>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                    <link rel="icon" type="image/x-icon" href="grifo.png">
                
                    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
                		
                		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
                		<link rel="stylesheet" href="/Bootstrap/bootstrap.min.css">
                			
                		<link rel="stylesheet" href="stle.css">
                		
                		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
                        
                        <!-- jQuery Library -->
                        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
                        
                        <!-- jQuery UI JS -->
                        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
                        
                        <!-- Datatable JS -->
                        <script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
                        
                        <!-- Datatable Boostrap5 -->
                        <script src="//cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
                        <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
                        <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">

                  </head>
                  <body>
		
            		<div class="wrapper d-flex align-items-stretch">
            			<nav id="sidebar">
            				<div class="p-4 pt-5">
            		  		<a href="#" class="img logo rounded-circle mb-5" style="background-image: url(find_user.png);"></a>
            	        <ul class="list-unstyled components mb-5">
            	          <li class="active">
            	            <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Reporte</a>
            	            <ul class="collapse list-unstyled" id="homeSubmenu">
                            <li>
                                <a href="#">Enviar a Excel</a>
                            </li>
                            </ul>  
            	          <li>
                          <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Usuarios</a>
                          <ul class="collapse list-unstyled" id="pageSubmenu">
                            <li>
                                <a href="#">Registro de Usuarios</a>
                            </li>
                            
                          </ul>
            	          
            	          
            	          <li>
                          <a href="#">Acerca del Proyecto</a>
            	          </li>
            	        </ul>
            
            	        <div class="footer">
            	        	<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
            						  Copyright &copy;<script>document.write(new Date().getFullYear());</script> Derechos reservados | Por el Doctor. Camas <i class="icon-heart" aria-hidden="true"></i> by <a href="https://monitoreodelagua-com-302225.hostingersite.com" target="_blank">monitoreodelagua-com-302225.hostingersite.com</a>
            						  <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
            	        </div>
            
            	      </div>
                	</nav>

        <!-- Page Content  -->
                              <div id="content" class="p-3 p-md-2">
                        
                                <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                                  <div class="container-fluid">
                        
                                    <button type="button" id="sidebarCollapse" class="btn btn-primary">
                                      <i class="fa fa-bars"></i>
                                      <span class="sr-only">Toggle Menu</span>
                                    </button>
                                      <button class="btn btn-dark d-inline-block d-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                    <i class="fa fa-bars" aria-hidden="true"></i>
                                        </button>
                                    
                                        <div class="dropdown col-sm-1">
                                      <a class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
                                      <img src="find_user.png" class="rounded-circle" height="22" alt="" loading="lazy" />
                                      </a>
                                      <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
                                        <li><a class="dropdown-item active" href="#">Bienvenido</a></li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li><a class="dropdown-item" href="#">Nombre</a></li>
                                        <li><a class="dropdown-item" href="#">Cambio de contraseña</a></li>
                                        <li><a class="dropdown-item" href="../cerrar_sesion.php">Cerrar Sesión</a></li>
                                      </ul>
                                      </div>
   
                                    </div>
                                </nav>
                        <!--Inicia la Pagina de contenido-->
                                        <center><h2 class="mb-4">Sistema de Monitoreo del Agua</h2></center>
                                        <main>
                                        <div class="container">                            
                                       <div class="alert alert-primary" role="alert">
                                       Rango de Busqueda por fechas de la temperatura del Agua
                                      </div>
                                       <div class="input-group date" id="datepicker">
                                       <form id="formFecha">
                                       <table>
                                         <tr>
                                           <td>
                                              <input type="text" readonly id="buscar_inicio" class="datepicker" placeholder="Fecha Inicio"
                                           </td>
                                           <td>
                                              <input type="text" readonly id="buscar_fin" class="datepicker" placeholder="Fecha fin">
                                           </td>
                                           <td>
                                              <input type='button' id="btn_search" value="Buscar" class="btn btn-primary btn-sm">
                                           </td>
                                           <td>
                                              <input type='button' id="btnLimpiar" value="Limpiar" class="btn btn-danger btn-sm">
                                           </td>
                                         </tr>
                                       </table>
                                    </form>
                                    </div>
                                    <hr>
                           <!-- Table -->
                           <table id='Tabla_personal' class="table table-striped" style="width:100%">
                             <thead>
                               <tr>
                                 <th>Nombre personal</th>
                                 <th>Email</th>
                                 <th>Salario</th>
                                 <th>Ciudad</th>
                                 <th>Fecha de ingreso</th>
                               </tr>
                             </thead>
                        
                           </table>
                        </div>


                      </div>
		              </div>
		              </div>
		              </main>
	<script>
   $("#btnLimpiar").click(function(event) {
	   $("#formFecha")[0].reset();
   });
</script>


    <script src="/js/jquery.min.js"></script>
    <script src="/js/popper.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/script.js"></script>
  </body>
</html>